<template>
    <div class="d1">
        <div class="btn">
            <button @click="change">点击</button>
            <h3>头部</h3>
        </div>
        <div class="d2" :class="{none:isNone}">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, exercitationem ea? Aut alias, enim expedita numquam accusamus soluta neque ea modi itaque consectetur dolorem similique sed placeat reiciendis quis tempora minus, eaque eius reprehenderit perferendis mollitia dolores. Nihil distinctio vitae earum voluptatem excepturi inventore sapiente nesciunt magni iure quam impedit explicabo quos dolor, facere 
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, exercitationem ea? Aut alias, enim expedita numquam accusamus soluta neque ea modi itaque consectetur dolorem similique sed placeat reiciendis quis tempora minus, eaque eius reprehenderit perferendis mollitia dolores. Nihil distinctio vitae earum voluptatem excepturi inventore sapiente nesciunt magni iure quam impedit explicabo quos dolor, facere 
        </div>
        <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, fugit earum libero, molestias suscipit nesciunt adipisci saepe temporibus facere, natus nihil sit! Ad quis accusamus provident magni adipisci reprehenderit ex, nostrum rem, tempore eaque aut, nesciunt fuga illo! Ad doloremque fugit sequi, corporis suscipit adipisci quae. Commodi vero quasi quas neque iure impedit quibusdam sed quam deleniti asperiores praesentium ut quidem nisi sapiente nulla libero nesciunt sit autem aliquid, voluptatum nemo blanditiis. Est fugit aliquid cumque ratione eum impedit, nisi non dolore cupiditate? Error nostrum rerum quo. Facilis accusantium enim nulla, aspernatur nesciunt nemo laboriosam dolor repellat magnam sunt reiciendis provident praesentium, quos tenetur quibusdam hic? Fugiat aperiam sunt mollitia voluptates tempora nesciunt architecto. Deserunt mollitia obcaecati tenetur sit ea dignissimos quam nostrum repellat rem, quas temporibus aut sapiente dicta quaerat quisquam at fuga. Beatae quisquam in excepturi vitae quod quae illum eos. Assumenda autem nulla facilis dolorum obcaecati non et. Dolor quidem veritatis obcaecati hic laborum totam cum, quis enim consequatur accusamus ipsam voluptates iure expedita modi placeat corrupti. Reiciendis odit animi velit, incidunt eius dicta enim, itaque laudantium suscipit delectus qui porro maxime hic tempore repellendus tempora a? Ullam corrupti dolore officia, asperiores laborum minus molestiae nisi possimus rem ipsa voluptatem iste, quaerat ea unde accusantium eum maxime. Esse nulla repudiandae id facilis ducimus accusantium obcaecati suscipit dolore, quae tempora unde eligendi neque porro, magnam saepe sint ab. Recusandae aperiam vitae cumque beatae, commodi at obcaecati possimus repudiandae omnis et vel fugiat eligendi unde ipsam laboriosam atque non. Quas odio, iste eos nam maiores consectetur impedit, sint voluptatibus totam veniam facere fuga error, natus quos nemo eius aliquam cumque vel quae officiis ex quia libero rem iure! Exercitationem necessitatibus vitae debitis non, officiis architecto natus delectus corrupti labore quam molestias accusamus voluptas quo praesentium. Delectus esse sit voluptate deleniti tempora harum doloremque odit, nihil soluta in maxime, laborum autem nulla eum, dolorem suscipit voluptas nostrum reprehenderit optio laboriosam mollitia a dolore. Eaque magni tempora inventore animi natus debitis dolorem obcaecati. Iusto veritatis exercitationem eius laboriosam nam aspernatur enim quisquam quidem, eveniet, temporibus cum. Iusto dolor, voluptate iste cumque consequatur sint? Dicta quidem modi voluptatum corrupti incidunt nulla. Tempora sunt consectetur soluta, obcaecati cumque quae ea cupiditate eligendi voluptas provident quis vel aliquam dignissimos laborum maxime adipisci aspernatur quasi? Veritatis sit quia doloremque, sunt provident veniam consequuntur voluptate a, consequatur esse aliquam placeat eius aut. Praesentium, ipsa reprehenderit! Aperiam blanditiis voluptate, dicta culpa vel suscipit sunt animi nobis itaque nam qui inventore, numquam et earum ipsam ad? Consequuntur ad dignissimos earum, tempora, corrupti et maxime animi beatae voluptatibus hic atque iure repudiandae, deserunt delectus! Neque magni repellendus sapiente, consequatur voluptatem perferendis quisquam? Officiis saepe laudantium reprehenderit atque eius. Voluptates eius dolore similique, nesciunt, minima quaerat totam dolor minus eos consequatur dignissimos eligendi unde illo laborum officia quibusdam optio beatae, numquam ullam in iusto. Sunt minima maiores qui ullam, quaerat quia et numquam, tempore enim ipsam tenetur asperiores distinctio, explicabo est non sint deserunt sequi culpa. Dolorem quia nisi eaque.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, fugit earum libero, molestias suscipit nesciunt adipisci saepe temporibus facere, natus nihil sit! Ad quis accusamus provident magni adipisci reprehenderit ex, nostrum rem, tempore eaque aut, nesciunt fuga illo! Ad doloremque fugit sequi, corporis suscipit adipisci quae. Commodi vero quasi quas neque iure impedit quibusdam sed quam deleniti asperiores praesentium ut quidem nisi sapiente nulla libero nesciunt sit autem aliquid, voluptatum nemo blanditiis. Est fugit aliquid cumque ratione eum impedit, nisi non dolore cupiditate? Error nostrum rerum quo. Facilis accusantium enim nulla, aspernatur nesciunt nemo laboriosam dolor repellat magnam sunt reiciendis provident praesentium, quos tenetur quibusdam hic? Fugiat aperiam sunt mollitia voluptates tempora nesciunt architecto. Deserunt mollitia obcaecati tenetur sit ea dignissimos quam nostrum repellat rem, quas temporibus aut sapiente dicta quaerat quisquam at fuga. Beatae quisquam in excepturi vitae quod quae illum eos. Assumenda autem nulla facilis dolorum obcaecati non et. Dolor quidem veritatis obcaecati hic laborum totam cum, quis enim consequatur accusamus ipsam voluptates iure expedita modi placeat corrupti. Reiciendis odit animi velit, incidunt eius dicta enim, itaque laudantium suscipit delectus qui porro maxime hic tempore repellendus tempora a? Ullam corrupti dolore officia, asperiores laborum minus molestiae nisi possimus rem ipsa voluptatem iste, quaerat ea unde accusantium eum maxime. Esse nulla repudiandae id facilis ducimus accusantium obcaecati suscipit dolore, quae tempora unde eligendi neque porro, magnam saepe sint ab. Recusandae aperiam vitae cumque beatae, commodi at obcaecati possimus repudiandae omnis et vel fugiat eligendi unde ipsam laboriosam atque non. Quas odio, iste eos nam maiores consectetur impedit, sint voluptatibus totam veniam facere fuga error, natus quos nemo eius aliquam cumque vel quae officiis ex quia libero rem iure! Exercitationem necessitatibus vitae debitis non, officiis architecto natus delectus corrupti labore quam molestias accusamus voluptas quo praesentium. Delectus esse sit voluptate deleniti tempora harum doloremque odit, nihil soluta in maxime, laborum autem nulla eum, dolorem suscipit voluptas nostrum reprehenderit optio laboriosam mollitia a dolore. Eaque magni tempora inventore animi natus debitis dolorem obcaecati. Iusto veritatis exercitationem eius laboriosam nam aspernatur enim quisquam quidem, eveniet, temporibus cum. Iusto dolor, voluptate iste cumque consequatur sint? Dicta quidem modi voluptatum corrupti incidunt nulla. Tempora sunt consectetur soluta, obcaecati cumque quae ea cupiditate eligendi voluptas provident quis vel aliquam dignissimos laborum maxime adipisci aspernatur quasi? Veritatis sit quia doloremque, sunt provident veniam consequuntur voluptate a, consequatur esse aliquam placeat eius aut. Praesentium, ipsa reprehenderit! Aperiam blanditiis voluptate, dicta culpa vel suscipit sunt animi nobis itaque nam qui inventore, numquam et earum ipsam ad? Consequuntur ad dignissimos earum, tempora, corrupti et maxime animi beatae voluptatibus hic atque iure repudiandae, deserunt delectus! Neque magni repellendus sapiente, consequatur voluptatem perferendis quisquam? Officiis saepe laudantium reprehenderit atque eius. Voluptates eius dolore similique, nesciunt, minima quaerat totam dolor minus eos consequatur dignissimos eligendi unde illo laborum officia quibusdam optio beatae, numquam ullam in iusto. Sunt minima maiores qui ullam, quaerat quia et numquam, tempore enim ipsam tenetur asperiores distinctio, explicabo est non sint deserunt sequi culpa. Dolorem quia nisi eaque.
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            isNone:true,
        }
    },
    methods:{
        change(){
            this.isNone=!this.isNone
            if(this.isNone==false){    //在fixed的div显示时，把body.style的height调整为100%；
                // document.body.style.height="100%";
                // document.body.style.overflow="hidden";
                document.body.style="height: 100%; overflow: hidden;"
                var html = document.getElementsByTagName("html")[0];;
            }else{
                 document.body.style="";
            }
        }
    }
}

</script>
<style>
    .d1{
        
    }
    .d2{
        font-size:26px;
        position:fixed;
        width:100%;
        height:100%;
        background-color:aqua;
        overflow: auto;
        z-index:10;
        /* top:30px; */
        left:0;
    }
    .none{
         display:none; 
    }
    .btn{
        background-color: red;
    }
</style>
